<template>
	<view class="page">
		<image class="bg" src="../../../static/20231212092243.png"></image>
		<view class="name">
			<view>订单编号：{{id}}</view>
			<view>下单时间：{{time}}</view>
		</view>
		<view class="namecode">出示卷码</view>
		<canvas id="qrcode" canvas-id="qrcode" class="code"></canvas>
	<!-- 	<image class="code" src="../../../static/20230328061106_d73a2.jpg"></image> -->
		<view class="remind">请勿对工作人员以外的人员出示核销码</view>
	</view>
</template>

<script>
	import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'
	export default {
		data() {
			return {
				id:"",
				time:'',
				img:''
			}
		},
		onLoad(e) {
			this.id=e.id
			this.time=e.time
			console.log(e)
		},
		onReady() {
		// 获取uQRCode实例
		var qr = new UQRCode();
		// 设置二维码内容
		qr.data = `/bundle/pages/orderdetails/orderdetails?id=${this.id}`;
		// 设置二维码大小，必须与canvas设置的宽高一致
		qr.size =200;
		// 调用制作二维码方法
		qr.make();
		// 获取canvas上下文
		var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
		// 设置uQRCode实例的canvas上下文
		qr.canvasContext = canvasContext;
		// 调用绘制方法将二维码图案绘制到canvas上
		qr.drawCanvas();
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.page {

		position: relative;
	}

	.bg {
		position: absolute;
		z-index: -1;
		width: 718rpx;
		height: 982rpx;
		margin: 16rpx;
	}

	.name {
		line-height: 50rpx;
		z-index: 999;
		padding: 96rpx 0rpx 0rpx 90rpx;
		font-size:28rpx ;
	}
	.namecode{
		margin-top: 90rpx;
		margin-left: 40rpx;
		font-size: 34rpx;
		font-weight: 600;
	}
	.code{
		width: 400rpx;
		height: 400rpx;
		border-radius: 20rpx;
		// position: absolute;
		margin: 68rpx 0rpx 0rpx 180rpx;
	}
	.remind{
		text-align: center;
		font-size: 28rpx;
		color: #FF2B2B;
		margin-top: 60rpx;
	}
</style>